<template>
    <div v-loading.lock="show">
        <centerHeader :title="header"></centerHeader>
        <div class="novel" v-show="!show">
            <div class="input">
                <input type="text" autocomplete="off" placeholder="关键字" v-model="parameter.novel">
                <div class="search" @click="searchbook">
                    <img src="../../../public/img/shoucuo.png" alt="">
                </div>
            </div>
            <div class="fenlei">
                <p v-for="(items, index) in classify" :key="index" class="list" :class="{isheight: items.isHeight}">
                    <label>{{items.title}}:</label>
                    <router-link tag="span" :to="'/home/novellist/' + index + '/' +item.id" v-for="(item, idx) in items.content" :key="idx" @click.native="selectClass"
                    :class="item.select?'fenglei_span':'fenglei_span1'" replace> {{item.cate_name}} </router-link>
                </p>
            </div>
            <booklist :booklistData="booklistData"></booklist>
            <div class="btn" @click="loadmore">{{btn?'加载更多':'没有数据了'}}</div>
        </div>
    </div>
</template>

<script>
import booklist from "./booklist";
import centerHeader from "../../../components/center-header";

export default {
  data() {
    return {
      btn: true,
      show: true,
      inputvalue: "",
      checkedMsg: 0,
      novelist: "",
      id: -1,
      booklistData: {},
      classify: [
        {
          title: "读者性别",
          type: "channel",
          content: [
            {
              cate_name: "全部",
              id: 0,
              select: true
            },
            {
              cate_name: "男频",
              id: 1,
              select: false
            },
            {
              cate_name: "女频",
              id: 2,
              select: false
            }
          ]
        },
        {
          title: "更新状态",
          type: "status",
          content: [
            {
              cate_name: "全部",
              id: 0,
              select: true
            },
            {
              cate_name: "连载中",
              id: 1,
              select: false
            },
            {
              cate_name: "已完结",
              id: 3,
              select: false
            }
          ]
        },
        {
          title: "小说类型",
          type: "cate_id",
          content: [
            {
              cate_name: "全部",
              select: true,
              id: 0
            }
          ]
        },
        {
          title: "派单指数",
          type: "score",
          content: [
            {
              cate_name: "全部",
              id: 0,
              select: true
            },
            {
              cate_name: "100~91",
              id: 1,
              select: false
            },
            {
              cate_name: "90~81",
              id: 2,
              select: false
            },
            {
              cate_name: "80~60",
              id: 3,
              select: false
            }
          ]
        }
      ],
      parameter: {
        channel: 0,
        cate_id: 0,
        status: 0,
        page: 1,
        limit: 10,
        novel: "",
        score: 0,
        d_id: JSON.parse(localStorage.userInfo).user_id
      },
      header: [
        { title: "小说列表", path: "" }
      ]
    };
  },
  methods: {
    selectClass(e) {
      let type = this.$route.params.type;
      let status = this.$route.params.status;
      // console.log(type, status)
      this.classify[type].content.forEach(function(value, index, arr) {
        value.select = false;
      });
      if (type == 1 && status == 3) {
        this.classify[type].content[2].select = true;
      } else {
        this.classify[type].content[status].select = true;
      }
      this.parameter[this.classify[type].type] = parseInt(status);
      this.parameter.page = 1;

      let that = this;
      that
        .getClassify()
        .then(function(res) {
          if (res.data.code === 200) {
            console.log(res);
            for (let i = 0; i < res.data.data.length; i++) {
              res.data.data[i].cate_name =
                that.classify[2].content[res.data.data[i].cate_id].cate_name;
            }
            that.booklistData = res.data.data;
          }
          //
        })
        .catch(function(error) {
          error = error + "";
          if (error.search("timeout") !== -1) {
            //超时判断
            that.loading_read = true;
          }
        });
    },
    searchbook() {
      let that = this;
      console.log(that.parameter);
      that
        .getClassify()
        .then(function(res) {
          if (res.data.code === 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              res.data.data[i].cate_name =
                that.classify[2].content[res.data.data[i].cate_id].cate_name;
            }
            that.booklistData = res.data.data;
            that.show = true;
          }
          //
        })
        .catch(function(error) {
          error = error + "";
          if (error.search("timeout") !== -1) {
            //超时判断
            that.loading_read = true;
          }
        });
    },
    loadmore() {
      let that = this;
      that.$utils.loadmore(
        that,
        {
          api: "/cp/v1/book/getClassify",
          parameter: that.parameter,
          oldArr: that.booklistData
        },
        function(res) {
          if (!res) {
            that.btn = false;
            return;
          } else {
            for (let i = 0; i < res.data.data.length; i++) {
              res.data.data[i].cate_name =
                that.classify[2].content[res.data.data[i].cate_id].cate_name;
            }
          }
        },
        function(arr) {
          that.booklistData = arr;
        }
      );
    },
    getCateList() {
      return this.axios.post("/index/v1/other/getCateList");
    },
    getClassify() {
      return this.axios.post("/cp/v1/book/getClassify", this.parameter);
    }
  },
  created() {
    let that = this;
    that.axios
      .all([that.getCateList(), that.getClassify()])
      .then(
        that.axios.spread(function(res1, res2) {
          if (res1.data.code === 200 && res2.data.code === 200) {
            var arr = res1.data.data;
            for (let i = 0; i < arr.length; i++) {
              arr[i].select = false;
            }
            that.classify[2].content = that.classify[2].content.concat(arr);
            for (let i = 0; i < res2.data.data.length; i++) {
              res2.data.data[i].cate_name =
                arr[res2.data.data[i].cate_id - 1].cate_name;
            }

            that.booklistData = res2.data.data;

            that.show = false;
            // console.log(res1,res2)
          }
        })
      )
      .catch(function(error) {
        error = error + "";
        if (error.search("timeout") !== -1) {
          //超时判断
          that.loading_read = true;
        }
      });
  },
  components: {
    booklist,
    centerHeader
  }
};
</script>
<style scoped>
.novel {
  /* margin: 27px 50px 27px 32px; */
  padding: 29px 33px 66px 32px;
  min-width: 824px;
}
.novel .input {
  width: 238px;
  height: 36px;
  font-size: 14px;
  position: relative;
  margin-bottom: 8px;
}
.novel .input > input {
  width: 100%;
  height: 100%;
  border: none;
  border: 1px solid #ccc;
  padding-left: 4px;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", "微软雅黑";
}
input:-ms-input-placeholder {
  color: #ccc;
  opacity: 1;
}

input::-webkit-input-placeholder {
  color: #ccc;
  opacity: 1;
}

.novel .input .search {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 36px;
  padding-top: 10px;
  background-color: #36a4ff;
  text-align: center;
  box-sizing: border-box;
}
.novel .input .search:hover {
  cursor: pointer;
}
.novel .input .search > img {
  width: 20px;
}
/* 分類 */

.fenlei {
  margin-bottom: 26px;
  font-size: 14px;
}

.fenlei > p {
  margin-bottom: 10px;
}

.fenlei > p > label {
  margin-right: 6px;
  color: #666;
}

.fenlei > p > span {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 4px;
  margin-top: 4px;
}
.fenglei_span1 {
  color: #36a4ff;
}
.fenglei_span1:hover {
  background: #eee;
}
.fenglei_span {
  background: #36a4ff;
  color: #ffffff;
}
.fenglei_span:hover {
  background: rgb(35, 144, 233);
  color: #ffffff;
}

.btn {
  width: 194px;
  height: 43px;
  margin: 0 auto;
  border-radius: 10px;
  background: #f4f4f4;
  color: #666;
  text-align: center;
  line-height: 43px;
}
.btn:hover {
  cursor: pointer;
  background: #e6e6e6;
  color: rgb(85, 85, 85);
}
</style>

